import React, { useState, useEffect } from 'react';

const TaskForm = ({ onAddTask, onEditTask, editingTask }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [priority, setPriority] = useState('medium'); // high, medium, low
  const [tags, setTags] = useState('');
  const [dueDate, setDueDate] = useState('');
  
  // 从父组件获取所有标签
  // const allTags = [...new Set(tasks.flatMap(task => task.tags || []))];

  // 如果是编辑模式，初始化表单数据
  useEffect(() => {
    if (editingTask) {
      setTitle(editingTask.title);
      setDescription(editingTask.description || '');
      setPriority(editingTask.priority || 'medium');
      setTags(editingTask.tags ? editingTask.tags.join(', ') : '');
      setDueDate(editingTask.dueDate || '');
    } else {
      // 重置表单
      setTitle('');
      setDescription('');
      setPriority('medium');
      setTags('');
      setDueDate('');
    }
  }, [editingTask]);

  const handleSubmit = (e) => {
    e.preventDefault();
    
    // 验证表单
    if (!title.trim()) {
      alert('请输入任务标题');
      return;
    }
    
    const taskData = {
      title: title.trim(),
      description: description.trim(),
      priority,
      tags: tags.split(',').map(tag => tag.trim()).filter(tag => tag),
      dueDate: dueDate || null
    };
    
    if (editingTask) {
      onEditTask({ ...taskData, id: editingTask.id });
    } else {
      onAddTask(taskData);
    }
    
    // 重置表单
    setTitle('');
    setDescription('');
    setPriority('medium');
    setTags('');
    setDueDate('');
  };

  return (
    <form onSubmit={handleSubmit} className="mb-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
      <h2 className="text-xl font-bold mb-4">{editingTask ? '编辑任务' : '添加新任务'}</h2>
      
      <div className="mb-4">
        <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="title">
          标题 *
        </label>
        <input
          id="title"
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-300 focus:border-blue-500 animate-border-glow"
          placeholder="任务标题"
        />
      </div>
      
      <div className="mb-4">
        <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="description">
          描述
        </label>
        <textarea
          id="description"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-300 focus:border-blue-500 animate-border-glow"
          placeholder="任务描述"
          rows="3"
        />
      </div>
      
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
        <div>
          <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="priority">
            优先级
          </label>
          <select
          id="priority"
          value={priority}
          onChange={(e) => setPriority(e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-300 focus:border-blue-500 animate-border-glow"
        >
          <option value="high">高</option>
          <option value="medium">中</option>
          <option value="low">低</option>
        </select>
        </div>
        
        <div>
          <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="dueDate">
            截止日期
          </label>
          <input
          id="dueDate"
          type="date"
          value={dueDate}
          onChange={(e) => setDueDate(e.target.value)}
          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-300 focus:border-blue-500 animate-border-glow"
        />
        </div>
      </div>
      
      <div className="mb-4">
            <label className="block text-gray-700 dark:text-gray-300 mb-2" htmlFor="tags">
              标签
            </label>
            <input
              id="tags"
              type="text"
              value={tags}
              onChange={(e) => setTags(e.target.value)}
              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-all duration-300 focus:border-blue-500"
              placeholder="输入标签，用逗号分隔"
            />
            {/* {allTags.length > 0 && (
              <div className="mt-2 flex flex-wrap gap-2">
                {allTags.map(tag => (
                  <button
                    key={tag}
                    type="button"
                    onClick={() => {
                      const tagList = tags.split(',').map(t => t.trim()).filter(t => t);
                      if (tagList.includes(tag)) {
                        // 如果标签已存在，则移除它
                        const newTags = tagList.filter(t => t !== tag).join(', ');
                        setTags(newTags);
                      } else {
                        // 如果标签不存在，则添加它
                        setTags(prev => prev ? `${prev}, ${tag}` : tag);
                      }
                    }}
                    className="px-2 py-1 bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 rounded text-sm"
                  >
                    {tag}
                  </button>
                ))}
              </div>
            )} */}
          </div>
      
      <div className="flex justify-end space-x-3">
        {editingTask && (
          <button
            type="button"
            onClick={() => {
              // 重置表单
              setTitle('');
              setDescription('');
              setPriority('medium');
              setTags('');
              setDueDate('');
            }}
            className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
          >
            取消
          </button>
        )}
        <button
        type="submit"
        className="px-4 py-2 bg-blue-400 dark:bg-purple-600 text-black dark:text-white rounded-lg hover:bg-blue-700 dark:hover:bg-purple-700 transition-all duration-300 animate-fill-slide"
      >
        <span className="relative z-10">{editingTask ? '更新任务' : '添加任务'}</span>
      </button>
      </div>
    </form>
  );
};

export default TaskForm;